<template>
	<div class="loginLog">

		<div class="body">
			<div class="item">
				<div class="order">
					序号
				</div>
				<div class="time">
					用户账户
				</div>
				<div class="desc">
					用户操作
				</div>
				<div class="from">
					登录IP
				</div>
				<div class="release">
					操作时间
				</div>
			</div>
			<div class="item" v-for="(item,index) in pags" :key="index">
				<div class="order">
					{{index+1}}
				</div>
				<div class="time">
					{{item.userName}}
				</div>
				<div class="desc">
					{{item.command}}
				</div>
				<div class="from">
					{{item.accessIp}}
				</div>
				<div class="release">
					<span class="data">{{item.createTime}}</span>
				
				</div>
			</div>
			<!-- 分页 -->
		    <div class="pagination">
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page='pageNum'
			      :page-size="pageSize"
			      layout="total, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
		    </div>
		</div>
	</div>
</template>
<script>
	export default{
		name:'loginLog',
		data(){
			return{
				pags:[],
				total:0,
				pageNum:1,
				pageSize:30
			}
		},
		mounted(){
			this.getpage()
		},
		methods:{
			getpage(){
				this.$http.post('vrv-monitor-platform-web/user/log/page',{
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}).then((res)=>{
					if(res.body.success==true){
						this.total = res.body.total
						this.pags = res.body.data
					}
				})
			},
			handleSizeChange(val) {
		    },
		    handleCurrentChange(val) {
		        this.pageNum = val
		        this.getpage()
		    },
		}
		
	}
</script>
<style scoped>
	.right{
		text-align: right;
		padding: 1.2rem 2rem;
	}
	.item{
		height: 3.8rem;
		display: flex;
		padding: 0 5.5rem;
		border-bottom: 1px solid #dcdcdc;
		line-height: 3.8rem;
		font-size: 0.88rem;
	}
	.item .time{
		width: 20%;
	}
	.item .order{
		width: 20%;
	}
	.item .desc{
		width: 20%;
		overflow: hidden;
		white-space: normal;
		text-overflow:ellipsis;
		margin-right: 20px;
	}
	.item .from{
		width: 20%;
		overflow: hidden;
		white-space: normal;
		text-overflow:ellipsis;
	}
	.item .release{
		width: 20%;
	}
	.pagination{
		text-align: right;
		padding: 15px 15px;
	}
</style>